<%@page import="entity.SalesRecord"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.List" %>
<%@ page import="entity.ScenicSpot" %>
<%@ page import="entity.SalesRecord" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>销售人员管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
    <script type="text/javascript">
        // 获取提示信息
        var message = "${message}";
        if (message) {
            alert(message); // 弹出提示信息
        }
    </script>
</head>
<body>
    <header>
        <div class="logo">山东旅游网</div>
        <nav class="user-actions">
            <ul>
                <li><a href="index.jsp">退出</a></li>
            </ul>
        </nav>
    </header>

    <div class="container">
        <h1 class="text-center mb-4">销售人员管理</h1>

        <!-- 调用 Servlet 逻辑 -->
        <%
            // 创建 SalesRecordOfSalesDao 实例
            Dao.SalesRecordOfSalesDao sd = new Dao.SalesRecordOfSalesDao();

            // 调用 DAO 方法获取所有消费记录
            List<SalesRecord> salesRecords = sd.getAllSalesRecords();

            // 将消费记录列表设置到 request 中
            request.setAttribute("salesRecords", salesRecords);
        %>

        <!-- 消费记录表格 -->
        <div class="table-container">
            <h5 class="text-center">所有用户消费记录</h5>

            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>记录ID</th>
                        <th>用户ID</th>
                        <th>景点ID</th>
                        <th>门票数量</th>
                        <th>消费金额</th>
                        <th>销售时间</th>
                    </tr>
                </thead>
                <tbody>
                    <%
                        if (salesRecords != null) {
                            for (SalesRecord record : salesRecords) {
                    %>
                    <tr>
                        <td><%= record.getRecordID() %></td>
                        <td><%= record.getUserID() %></td>
                        <td><%= record.getSpotID() %></td>
                        <td><%= record.getTicketQuantity() %></td>
                        <td><%= record.getConsumptionAmount() %></td>
                        <td><%= record.getSaleTime() %></td>
                    </tr>
                    <%
                            }
                        } else {
                    %>
                    <tr>
                        <td colspan="6" class="text-center">暂无消费记录</td>
                    </tr>
                    <%
                        }
                    %>
                </tbody>
            </table>
        </div>
    </div>

    <footer>
        <div class="footer-container">
            <div class="footer-text">
                <p>
                    <span>Copyright © 2024</span>
                    <span>山东建筑大学</span>
                </p>
            </div>
        </div>
    </footer>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        header {
            background-color: white;
            display: flex;
            justify-content: space-between;
            height: 60px;
            align-items: center;
            padding: 10px 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .logo {
            color: orange;
            font-size: 24px;
            font-weight: bold;
        }

        .user-actions ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
        }

        .user-actions ul li {
            margin-left: 20px;
        }

        .user-actions ul li a {
            text-decoration: none;
            color: gray;
        }

        .user-actions ul li a:hover {
            color: black;
        }

        .container {
            flex: 1;
            padding: 20px;
        }

        .table-container {
            margin-top: 20px;
        }

        .table-container h1 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
        }

        .table-container table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        .table-container th,
        .table-container td {
            padding: 12px;
            border: 1px solid #ddd;
            text-align: center;
        }

        .table-container th {
            background-color: #f8f9fa;
            font-weight: bold;
        }

        .table-container tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        .table-container tr:hover {
            background-color: #f1f1f1;
        }

        footer {
            background-color: green;
            color: white;
            padding: 15px 0;
            text-align: center;
        }

        .footer-text {
            margin: 0;
        }
    </style>
</body>
</html>